<template>
	<view>
		<view class="projectInfo ">
			<view v-if="isShows"
				style="line-height: 100upx;padding: 0 20upx;font-size: 36upx;font-weight: 700;background-color: #fff;">
				{{title}}
			</view>
			<view v-for="(i, ind) in lrCheckSample" :key="ind" class="chemicalNeck">
				<!-- 后修改 -->
				<view class="chemicalTitle">
					<view class="chemicalLeft">
						<view class="chemicalNum">{{ind+1| handleNum}}</view>
						<!-- <view>{{lrCheckSample[ind].fCurrentprojectname}} : </view> -->
						<view>{{lrCheckSample[ind].fBottleno}}</view>
						<view><!-- {{lrCheckSample[ind].fBottleunit}} --></view>
					</view>
				</view>
				<view class="chemicalInfoBox">
					<view class="chemicalLine">
						<view class="chemicalName">规格</view>
						<view class="chemicalInfo">{{lrCheckSample[ind].fChemistryspecs}}</view>
					</view>
					<view class="chemicalLine">
						<view class="chemicalName">存放位置</view>
						<view class="chemicalInfo">{{lrCheckSample[ind].fManufactor}}</view>
					</view>
					<view class="chemicalLine">
						<view class="chemicalName">重量</view>
						<view class="chemicalInfo">{{lrCheckSample[ind].fBottleweight}}{{lrCheckSample[ind].fBottleunit}}</view>
					</view>
					<view class="chemicalLine">
						<view class="chemicalName">样品编号</view>
						<view class="chemicalInfo">{{lrCheckSample[ind].fSampleno}}</view>
					</view>
					<view class="chemicalLine">
						<view class="chemicalName">领用重量</view>
						<view class="chemicalInfo">{{lrCheckSample[ind].fCollectweight}}</view>
					</view>
					<view class="chemicalLine">
						<view class="chemicalName">归还重量</view>
						<view class="chemicalInfo">{{lrCheckSample[ind].fReturnweight}}</view>
					</view>
					<view class="chemicalLine " id="chemicalNote">
						<view class="chemicalName">备注</view>
						
						<view class="chemicalInfo ">{{lrCheckSample[ind].fReturnnote}}</view>
					</view>
				</view>
			</view>
			<!-- <fromItem title="化学品(试剂)名称" :data="lrCheckSample.fOutprojectname" flex="left" nameColor="#989898"
				projectName="#343434">
			</fromItem>
			<fromItem title="化学品(试剂)分类" :data="lrCheckSample.fInprojectname" flex="left" nameColor="#989898"
				projectName="#343434">
			</fromItem> -->

		</view>
		<!-- 	<view class="projectUnI" id="datePage">
			<view class="min-collapse">
				<view class="card">
					<view>
						<view class="contents" :class="isShow1 ? 'animation': 'show-list animation' "
							:style="{'height':isShow1? 780+'upx' :'0'}">
							
							<view class="projectInfo">
								<fromItem title="种类" :data="lrCheckSample.fOutdeptname" flex="left" nameColor="#989898"
									projectName="#343434">
								</fromItem>
								<fromItem title="性状" :data="lrCheckSample.fIndeptname" flex="left" nameColor="#989898"
									projectName="#343434" type="textarea">
								</fromItem>


								<view class="chemicalTable">
									<view class="line">
										<fromItem title="危险品使用申请表" :data="lrCheckSample.fOutdates" flex="left"
											nameColor="#989898" projectName="#343434">
										</fromItem>
									</view>
									<view class="btn" @click="dangerDetail">详情</view>
								</view>
								<fromItem title="领用人" :data="lrCheckSample.fOutprojectequipprinciple" flex="left"
									nameColor="#989898" projectName="#343434">
								</fromItem>
								<fromItem title="领用日期" :data="lrCheckSample.fFormcheckusername" flex="left"
									nameColor="#989898" projectName="#343434">
								</fromItem>
								<fromItem title="用途" :data="lrCheckSample.fOutnote" flex="left" nameColor="#989898"
									projectName="#343434" type="textarea">
								</fromItem>
							</view>

						</view>
					</view>
				</view>
				<view class="card-view retract icon" @click="test">
					<text class="iconfont next icon-fanhui" :class="[isShow1 ? '' : 'retract_icon']" />
				</view>
			</view>

		</view> -->
	</view>
</template>
<script>
	import fromItem from '@/components/from-item/from-item.vue';
	export default {

		props: {
			lrCheckSample:                       {
				type: Array,
				default: function() {
					return []
				}
			},
			isShow: {
				type: Boolean,
				default: false
			},
			isShows: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: ''
			},
			fileList: {
				type: Array,
				default: function() {
					return []
				}
			},

		},

		data() {
			return {
				page: false,

				// isShow: false,

				feild: 0,
				isShow1: this.isShow


			}
		},
		components: {
			fromItem
		},
		watch: {
			fileList(e) {

				if (e.length > 4) {
					this.feild =
						e.length % 4 === 0 ?
						e.length / 4 :
						Math.floor(e.length / 4 + 1);
				} else if (e.length <= 4 && e.length > 0) {
					this.feild = 1;
				} else if (e.length == 0) {
					this.feild = 0;
				}
				console.log(this.feild)
			},


		},

		filters: {
			handleNum(val) {
				var num;
				if (val < 10) {
					num = '0' + val
				} else {
					num = val
				}
				return num
			},
			photoUrl(value, params) {


				var src = []
				if (value != undefined) {
					value.map((item) => {
						src.push(item.url)
					})
					return src
				}


			},
		},

		methods: {
			// 折叠
			test() {
				this.isShow1 = !this.isShow1
			},
			goProblem() {

				uni.navigateTo({
					url: `/pages/apply/supervisoryReview/check/problemPage?data=${JSON.stringify(this.lrCheckSample.problemItems)}&num=0`
				})
			},
			goGrade() {



				var item = {
					item: this.lrCheckSample.items
				}


				uni.navigateTo({
					url: `/pages/apply/supervisoryReview/check/grade?item=${JSON.stringify(item)}&num=1`,
					success(res) {

					},
					fail(res) {

					}
				})
				// console.log(this.lrCheckSample.items)

			},
			dangerDetail() { //危险品使用申请表详情跳转
				uni.navigateTo({
					url: "/pages/apply/chemicalAgent/reagent/dangerDetail"
				})
				// uni.navigateTo({
				// 	url: "/pages/apply/chemicalAgent/reagent/dangerDetail?selectIdList=" + JSON.stringify(
				// 			selectIdList) + "&fOutprojectid=" + this.totalData.fOutprojectid + "&fOutdeptid=" +
				// 		'5bd13605-cb26-4631-b8df-6364897e2ddd'
				// })
			},
			pdfPage(name, url) {

				// console.log(123,name, url)
				var aa = url;
				let links = encodeURIComponent(aa);

				uni.navigateTo({
					url: '/pages/apply/pdf?links=' + links + '&names=' + name
				});
			},


		}
	}
</script>
<style lang="less">
	// @import '../../components/s-calendar/icon.css';
	@import (less) '@/static/lx-calendar/fonts/iconfont.css';
	@import "@/components/s-calendar/icon.css";
	@import (less) '@/static/lx-calendar/fonts/iconfont.css';

	.chemicalNeck {
		// border: 2upx solid red;
		background-color: #fff;
		margin-bottom: 32upx;
		padding: 32upx;

		.chemicalTitle {

			display: flex;
			height: 40upx;
			line-height: 40upx;
			color: #171A1D;
			font-size: 28upx;
			justify-content: space-between;
			align-items: center;

			.chemicalLeft {
				display: flex;


				.chemicalNum {
					background-color: #64CCA9;
					color: #fff;
					font-size: 24upx;
					height: 40upx;
					padding: 0 24upx;
					line-height: 40upx;
					border-radius: 8upx;
					margin-right: 16upx;
					// display: flex;

				}
			}

			.chemicalRight {
				width: 32upx;
				height: 32upx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.chemicalInfoBox {
			margin-top: 16upx;

			.chemicalLine {
				display: flex;

				margin-bottom: 4upx;
				border-radius: 16upx;

				.chemicalName {
					background-color: #F6F6F6;
					color: #171A1D;
					font-size: 24upx;
					width: 220upx;
					height: 52upx;
					line-height: 52upx;
					padding-left: 32upx;
					margin-right: 4upx;

				}

				.chemicalInfo {
					flex: 1;
					height: 52upx;
					line-height: 52upx;
					background-color: #F6F6F6;
					color: #171A1D;
					padding-left: 24upx;
				}
				
			}
		}

	}
	#chemicalNote {
		// height:150upx !important;
		// min-height: 52upx;
		background-color: #F6F6F6;
		line-height: 0;
		padding-bottom: 15upx;
		.chemicalName {
			background-color: #F6F6F6;
			color: #171A1D;
			font-size: 24upx;
			width: 220upx;
			height: 100%;
			
			padding-left: 32upx;
			margin-right: 4upx;
		
		}
		
		.chemicalInfo {
			flex: 1;
			height: 100%;
			
			background-color: #F6F6F6;
			color: #171A1D;
			padding-left: 24upx;
		}
	}
</style>
